import React, { useState } from 'react';
import './Settings.css';

const Settings: React.FC = () => {
  const [activeTab, setActiveTab] = useState('general');
  const [settings, setSettings] = useState({
    theme: 'dracula',
    autoRefresh: true,
    refreshInterval: 30,
    notifications: true,
    language: 'zh-CN'
  });

  const tabs = [
    { id: 'general', label: 'General', icon: '⚙️' },
    { id: 'connection', label: 'Connection', icon: '🔗' },
    { id: 'appearance', label: 'Appearance', icon: '🎨' },
    { id: 'notifications', label: 'Notifications', icon: '🔔' },
    { id: 'about', label: 'About', icon: 'ℹ️' }
  ];

  const handleSettingChange = (key: string, value: any) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  const handleSave = () => {
    // Save settings logic here
    console.log('Settings saved:', settings);
  };

  return (
    <div className="settings-page">
      <div className="page-header">
        <div className="header-content">
          <h1>Settings</h1>
          <p className="header-description">Configure your LVM Manager preferences</p>
        </div>
      </div>

      <div className="settings-container">
        <div className="settings-sidebar">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`settings-tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              <span className="tab-icon">{tab.icon}</span>
              <span className="tab-label">{tab.label}</span>
            </button>
          ))}
        </div>

        <div className="settings-content">
          {activeTab === 'general' && (
            <div className="settings-section">
              <h2>General Settings</h2>
              <div className="setting-group">
                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Auto Refresh</label>
                    <p className="setting-description">Automatically refresh data at regular intervals</p>
                  </div>
                  <div className="setting-control">
                    <label className="toggle-switch">
                      <input
                        type="checkbox"
                        checked={settings.autoRefresh}
                        onChange={(e) => handleSettingChange('autoRefresh', e.target.checked)}
                      />
                      <span className="toggle-slider"></span>
                    </label>
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Refresh Interval (seconds)</label>
                    <p className="setting-description">How often to refresh data</p>
                  </div>
                  <div className="setting-control">
                    <select
                      value={settings.refreshInterval}
                      onChange={(e) => handleSettingChange('refreshInterval', parseInt(e.target.value))}
                      className="setting-select"
                    >
                      <option value={10}>10 seconds</option>
                      <option value={30}>30 seconds</option>
                      <option value={60}>1 minute</option>
                      <option value={300}>5 minutes</option>
                    </select>
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Language</label>
                    <p className="setting-description">Interface language</p>
                  </div>
                  <div className="setting-control">
                    <select
                      value={settings.language}
                      onChange={(e) => handleSettingChange('language', e.target.value)}
                      className="setting-select"
                    >
                      <option value="zh-CN">中文 (简体)</option>
                      <option value="en-US">English (US)</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'connection' && (
            <div className="settings-section">
              <h2>Connection Settings</h2>
              <div className="setting-group">
                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Connection Type</label>
                    <p className="setting-description">Local or remote libvirt connection</p>
                  </div>
                  <div className="setting-control">
                    <select className="setting-select">
                      <option value="local">Local System</option>
                      <option value="remote">Remote System</option>
                    </select>
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Connection URI</label>
                    <p className="setting-description">Libvirt connection URI</p>
                  </div>
                  <div className="setting-control">
                    <input
                      type="text"
                      className="setting-input"
                      placeholder="qemu:///system"
                      defaultValue="qemu:///system"
                    />
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Connection Timeout</label>
                    <p className="setting-description">Timeout for connection attempts</p>
                  </div>
                  <div className="setting-control">
                    <select className="setting-select">
                      <option value={5}>5 seconds</option>
                      <option value={10}>10 seconds</option>
                      <option value={30}>30 seconds</option>
                      <option value={60}>1 minute</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'appearance' && (
            <div className="settings-section">
              <h2>Appearance Settings</h2>
              <div className="setting-group">
                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Theme</label>
                    <p className="setting-description">Color theme for the interface</p>
                  </div>
                  <div className="setting-control">
                    <select
                      value={settings.theme}
                      onChange={(e) => handleSettingChange('theme', e.target.value)}
                      className="setting-select"
                    >
                      <option value="dracula">Dracula</option>
                      <option value="dark">Dark</option>
                      <option value="light">Light</option>
                    </select>
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Compact Mode</label>
                    <p className="setting-description">Reduce spacing and font sizes</p>
                  </div>
                  <div className="setting-control">
                    <label className="toggle-switch">
                      <input type="checkbox" />
                      <span className="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'notifications' && (
            <div className="settings-section">
              <h2>Notification Settings</h2>
              <div className="setting-group">
                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Enable Notifications</label>
                    <p className="setting-description">Show desktop notifications</p>
                  </div>
                  <div className="setting-control">
                    <label className="toggle-switch">
                      <input
                        type="checkbox"
                        checked={settings.notifications}
                        onChange={(e) => handleSettingChange('notifications', e.target.checked)}
                      />
                      <span className="toggle-slider"></span>
                    </label>
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">VM State Changes</label>
                    <p className="setting-description">Notify when VMs start or stop</p>
                  </div>
                  <div className="setting-control">
                    <label className="toggle-switch">
                      <input type="checkbox" defaultChecked />
                      <span className="toggle-slider"></span>
                    </label>
                  </div>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <label className="setting-label">Connection Errors</label>
                    <p className="setting-description">Notify about connection issues</p>
                  </div>
                  <div className="setting-control">
                    <label className="toggle-switch">
                      <input type="checkbox" defaultChecked />
                      <span className="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'about' && (
            <div className="settings-section">
              <h2>About LVM Manager</h2>
              <div className="about-content">
                <div className="about-item">
                  <span className="about-label">Version:</span>
                  <span className="about-value">1.0.0</span>
                </div>
                <div className="about-item">
                  <span className="about-label">API Version:</span>
                  <span className="about-value">v1</span>
                </div>
                <div className="about-item">
                  <span className="about-label">Build Date:</span>
                  <span className="about-value">2024-10-24</span>
                </div>
                <div className="about-item">
                  <span className="about-label">Libvirt Version:</span>
                  <span className="about-value">8.5.0</span>
                </div>
                <div className="about-item">
                  <span className="about-label">License:</span>
                  <span className="about-value">MIT</span>
                </div>
                <div className="about-item">
                  <span className="about-label">Description:</span>
                  <span className="about-value">A modern desktop application for managing libvirt virtual machines</span>
                </div>
              </div>
            </div>
          )}

          <div className="settings-footer">
            <button className="secondary" onClick={() => setActiveTab('general')}>
              Reset to Defaults
            </button>
            <button className="primary" onClick={handleSave}>
              Save Settings
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;